<!--
 * @Author: 刘霁雯
 * @Description: 已发布
 -->
<template>
  <div>
    <cli-title-saler></cli-title-saler>
    <div class="productList">
      <div class="new">
        <el-button icon="el-icon-circle-plus-outline" class="newPro"
                   onmouseover="this.style.backgroundColor='transparent';this.style.color='#494949'"
                   onmouseout="this.style.backgroundColor='#ff7a88';this.style.color='#fff'"
                   @click="publishPro()">发布商品</el-button>
      </div>
      <div class="listPro">
        <h1 style="margin-left: 25%;margin-top: 15%" v-if="proList.length===0">快发布你的第一个商品吧*.。(๑･∀･๑)*.。</h1>
        <product-list :list="list" :pro-list="this.proList"></product-list>
      </div>
    </div>

    <!--发布商品弹框-->
    <el-dialog  class='publishDialog' title="发布商品" :visible.sync="dialogNewProVisible" center :append-to-body='true'>
      <el-form :model="publishForm" :rules="publishRule" ref="publishForm">
        <el-form-item  prop="image">
          <el-upload
                  v-model="publishForm.image"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item prop="name" style="margin-top: 20px;margin-bottom: 0px">
          <el-input v-model="publishForm.name" placeholder="商品名称" @keyup.enter.native="publish('publishForm')"></el-input>
        </el-form-item>
        <el-form-item prop="type" style="margin-top: 20px;margin-bottom: 0px">
          <el-select style="width: 100% " v-model="publishForm.type" placeholder="请选择类别">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="price" style="margin-top: 20px;margin-bottom: 0px">
          <el-input v-model="publishForm.price" placeholder="商品单价" @keyup.enter.native="publish('publishForm')"></el-input>
        </el-form-item>
        <el-form-item prop="num" style="margin-top: 20px;margin-bottom: 0px">
          <el-input v-model="publishForm.num" placeholder="商品库存" @keyup.enter.native="publish('publishForm')"></el-input>
        </el-form-item>
        <el-form-item  prop="info" style="margin-top: 20px;margin-bottom: 0px">
          <el-input type="textarea"  v-model="publishForm.info" placeholder="商品介绍"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 20px">
          <el-button type="primary" @click="publish('publishForm')" class="publishBtn"
                     onmouseover="this.style.backgroundColor='transparent';this.style.color='#494949'"
                     onmouseout="this.style.backgroundColor='#ff7a88';this.style.color='#fff'"
                     round >发布</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import CliTitleSaler from "../../../components/base/cliTitleSaler";
  import ProductList from "../../../components/base/productList";
  import {isvalidNull} from "../../../components/util";
  import POST from "../../../api/POST";
  import Cookie from 'js-cookie'
  export default {
    components: {ProductList, CliTitleSaler},
    data () {
      var validateName = (rule, value, callback) => {
        if (isvalidNull(value)) {
          callback(new Error('商品名不能为空'))
        } else {
          callback()
        }
      }
      var validateType = (rule, value, callback) => {
        if (isvalidNull(value)) {
          callback(new Error('类别不能为空'))
        } else {
          callback()
        }
      }
      var validateNum = (rule, value, callback) => {
        if (isvalidNull(value)) {
          callback(new Error('库存不能为空'))
        } else {
          callback()
        }
      }
      var validatePrice = (rule, value, callback) => {
        if (isvalidNull(value)) {
          callback(new Error('单价不能为空'))
        } else {
          callback()
        }
      }
      return {
        list:2,
        proList:[],
        dialogNewProVisible: false,
        dialogImageUrl: '',
        dialogVisible: false,
        publishForm: {
          image: '',
          name: '',
          num: '',
          type: '',
          price: '',
          info: ''
        },
        options: [{
          value: '选项1',
          label: '服装'
        }, {
          value: '选项2',
          label: '食品'
        }, {
          value: '选项3',
          label: '生活用品'
        }, {
          value: '选项4',
          label: '电子'
        }],
        publishRule: {
          name: [
            { required: true, trigger: 'blur', validator: validateName }
          ],
          type: [
            { required: true, trigger: 'blur', validator: validateType }
          ],
          price: [
            { required: true, trigger: 'change', validator: validatePrice }
          ],
          num: [
            { required: true, trigger: 'change', validator: validateNum }
          ]
        }
      }
    },
    created () {
      this.getDataList()
    },
    methods: {
      getDataList () {
        let data={
          token:Cookie.get('token')

        }
        POST.storeProduct(data).then(res=>{
          this.proList=res
          console.log(this.proList)
        })
      },
      publishPro() {
        this.dialogNewProVisible = true
      },
      async publish(publishFrom) {
        this.$refs.publishForm.validate(valid => {
          if (valid) {
            this.dialogNewProVisible = false
            this.$message({
              message: '发布成功',
              type: 'success'
            })
          } else {
            console.log('error submit!!')
          }
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      addproduct(){
        let data={
          saleraccount:saleraccount,
          pic1:pic1,
          pic2:pic2,
          productname:productname,
          unitprice:unitprice,
          quantity:quantity,
          productintroduction:productintroduction,
          productclassify:productclassify
        }
        POST.insertProduct(data).then(res=>{
          console.log(res)
        })

      },
      updateProduct(){
        let data={
          saleraccount:saleraccount,
          pic1:pic1,
          pic2:pic2,
          productname:productname,
          unitprice:unitprice,
          quantity:quantity,
          productintroduction:productintroduction,
          productclassify:productclassify
        }
        POST.updateProduct(data).then(res=>{
          console.log(res)
        })
      },
      deleteProduct(){
        let data={
          saleraccount:saleraccount,
          productno:productno
        }
        POST.deleteProduct(data).then(res=>{
          console.log(res)
        })
      }

    }
  }
</script>
<style scope>
  .productList {
    position: absolute;
    right: 0;
    left: 0;
    top: 65px;
    margin: auto;
  }
  .new{
    float: right;
    margin-right: 3%;
  }

  .newPro{
    /*width: 100%;*/
    border-radius: 20px;
    margin-bottom: 0px;
    border-radius: 20px;
    color: #ffffff;
    background-color: #ff7a88;
    border:solid 2px #ff7a88;
  }
  .listPro {
    margin-top: 4%;
  }
  .publishBtn{
    width: 100%;
    border-radius: 20px;
    margin-bottom: 0px;
    background-color: #ff7a88;
    border:solid 2px #ff7a88;
  }
</style>
